<template>
  <div class="registerAccept">
    <div class="header">
      <div class="headImg">
        <img :src="channel.superChannelUserDto.headUrl" :alt="channel.superChannelUserDto.nickName">
      </div>
      <div class="user_title">{{showName(channel.superChannelUserDto)}}</div>
      <!-- <div class="user_title" v-if="showChannelName(channel.superChannelUserDto)">{{channel.superChannelUserDto.shopName}}</div> -->
      <div class="desc2">邀您注册恒华出行宝</div>
    </div>
    <div class="content w_94">
      <grid :cols="2">
        <grid-item v-for="menu in menus" :key="menu.id">
          <img slot="icon" :src="menu.imgUrl">
          <span slot="label">{{menu.name}}</span>
        </grid-item>
      </grid>
    </div>
    <x-button type="primary" class="w_94" :disabled="isDisabled" @click.native="acceptRegister()">{{pageTitle}}</x-button>
  </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import { XHeader, Group, Grid, GridItem, Cell, XButton, } from "vux";
import { Mutations, RouteUrl, StrLenth, Url_Key } from "src/common/const";
import { mapState } from "vuex";
export default {
  computed: mapState(["isInitData", "user", "channel", "shareUuid", "saveInsure", "isWeChar", "isWeAuth",]),
  components: { XHeader, Group, Grid, GridItem, Cell, XButton },
  data() {
    return {
      pageTitle: "接受邀请",
      menus: [
        { id: 1, name: "实时提现", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(1).png" },
        { id: 2, name: "丰厚奖励", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(2).png" },
        { id: 3, name: "精选产品", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(3).png" },
        { id: 4, name: "移动投保", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(4).png" }
      ],
      isDisabled: true,//默认禁用提交按钮
    };
  },
  watch: {
    isInitData(cur, old) {
      if (cur) {
        //初始化当前页面数据
        this.initPageData();
      }
    }
  },
  methods: {
    //推荐人信息
    showName(channelUser) {
      let name = "";//邀请人名称默认为空
      if (this.$common.isEmpty(channelUser)) {
        return name;
      }
      name = channelUser.userName;//名称
      if (this.$common.isEmpty(name)) {
        name = channelUser.nickName;//昵称
      }
      if (this.$common.isEmpty(name)) {
        name = channelUser.mobile;//手机号
      }
      return name;
    },
    //是否显示推荐人渠道名称
    showChannelName(channelUser) {
      //非个人（即渠道）账户
      if (this.$common.isNotEmpty(channelUser.registerType) && channelUser.registerType != "0") {
        return true;//显示
      }
      return false;//不显示
    },
    //接受邀请按钮
    acceptRegister() {
      this.$common.goUrl(this, RouteUrl.REGISTER_CHANNEL);
    },
    //初始化当前页面数据
    initPageData() {
      //所属部门--上级渠道账户usercode加密信息
      // let keyVal = this.$common.getUrlKey(Url_Key.SHARE_UUID);
      if (this.saveInsure.refereeData != false && this.$common.isNotEmpty(this.saveInsure.refereeData)) {

        //第一接口productMenuAd返回的分享人信息信息
        let refData = this.saveInsure.refereeData;
        this.isDisabled = false;//可点击按钮

        //已经存在的不用再查询
        if (this.$common.isEmpty(this.channel.superChannelUserDto.userCode)) {
          //查询上级渠道账户是否有效
          let _this = this;
          let data = { TYPE: "FORM", userCode: refData.userCode };
          _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
          _this.$http.post(RequestUrl.FIND_USER_BY_USER_CODE, data).then(function (res) {
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
            if (res.state != 0) {
              _this.isDisabled = true;//非正常连接的禁止点击接受注册
              _this.$common.showMsg(_this, res.result, "red;", false); //显示错误信息
              return;
            }
            let user = res.result;
            //账户状态，0=已注销，1=有效，2=挂失
            //注册类型：0=wx自主注册(个人用户)，1=后台注册(渠道用户)，2=分享注册(渠道用户)
            if (_this.$common.isNotEmpty(user.state) && user.state == "1") {
              //零时保存渠道用户信息
              _this.$common.storeCommit(_this, Mutations.SAVE_USER_CHANNEL_INFO, user);
              _this.isDisabled = false;//可点击按钮
            } else {
              _this.isDisabled = true;//非正常连接的禁止点击接受注册
              _this.$common.showMsg(_this, "请提供渠道账户的usercode！", "red;", false);//显示错误信息
            }
            return;
          });
        }
      } else {
        this.isDisabled = true;//非正常连接的禁止点击接受注册
        this.$common.showMsg(this, "请确认链接地址是否有效！", "red;", false);
      }
    },
  },
  mounted() {
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    document.title = this.pageTitle;

    //页面数据返回后执行初始化
    if (this.isInitData) {
      //初始化当前页面数据
      this.initPageData();
    }
  },
}
</script>

<style lang="scss" scoped>
.registerAccept {
  .header {
    position: relative;
    width: 100%;
    height: 38vh;
    z-index: 0;
    background: url("~assets/x3/ba3x.jpg") rgba(0, 0, 0, 0.6) no-repeat;
    background-size: 100% 100%;
    //头像
    .headImg {
      padding-top: 6%;
      img {
        display: block;
        width: 25%;
        height: 25%;
        border-radius: 50px;
        margin: 0px auto;
      }
    }
    .user_title {
      color: white;
      text-align: center;
      font-size: 16px;
      margin-top: 1%;
    }
    .desc1 {
      color: white;
      text-align: center;
      font-size: 16px;
      margin-top: 1%;
    }
    .desc2 {
      color: white;
      text-align: center;
      font-size: 12px;
    }
  }
  .w_94 {
    width: 94%; //跟按钮宽度保持一致
  }
  .content {
    margin: 4% auto 20px auto;
    background-color: white;
    border-radius: 6px;

    a:link {
      background-color: #fff !important;
    }
    a:visited {
      background-color: #fff !important;
    }
    a:hover {
      background-color: #fff !important;
    }
    a:active {
      background-color: #fff !important;
    }

    .weui-grid:before {
      border: 0px !important;
    }
    .weui-grid:after {
      border: 0px !important;
    }
    .weui-grids:before {
      border: 0px !important;
    }
    .weui-grids:after {
      border: 0px !important;
    }
  }
  //提交按钮失效时为亮灰色
  .weui-btn_disabled.weui-btn_primary {
    background-color: lightgray !important;
  }
}
</style>

